import { type FC } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { useSafeState, useMemoizedFn } from 'ahooks';
import { MaterialCommunityIcons, Feather } from '@expo/vector-icons';
import type { PasswordProps } from './types';
import { primaryColor } from '@/constants/Colors';

import Input from './index';
import Space from '../Space';
import styles from './styles';


const Password: FC<PasswordProps> = (props) => {
  const [shown, setShown] = useSafeState(false);
  const onShown = useMemoizedFn(() => setShown(!shown));

  const renderSwitch = () => {
    return (
      <TouchableOpacity
        activeOpacity={.8}
        style={styles.switch}
        onPressOut={onShown}
      >
        <MaterialCommunityIcons
          size={20}
          color="#666"
          name={`eye-${shown ? '' : 'off-'}outline`}
        />
      </TouchableOpacity>
    );
  }

  const renderSuffix = (focus: boolean) => {
    return (
      <Space>
        {renderSwitch()}
        {props.suffix?.(focus)}
      </Space>
    );
  }

  const renderPrefix = (focus: boolean) => {
    const color = focus ? primaryColor : "#aaa";
    return <Feather name="lock" size={18} color={color} />;
  }

  return (
    <Input
      {...props}
      password={!shown}
      suffix={renderSuffix}
      prefix={renderPrefix}
    />
  );
}

export default Password;